VimUnDo )H"TΝ>hze=G4غ /* } e e e hI k _ ~ } h/7 0const starField = new StarField(document.body, {5_ } ~ h/7 starCount: 200,5_ ~ h/7
minSize: 1,5_ h/7
maxSize: 3,5_ h/7 speed: 5,5_ h/7 color: "white" 5_ h/7 });5_ h/7 */5_ h/7 5_ h/7 0function renderStarsAsWord(word, options = {}) {5_ h/7 const {5_ h/7 # font = "bold 100px sans-serif",5_ h/7 resolution = 1,5_ h/7 3 maxStars = STAR_COUNT, // use the defined count5_ h/7 # transitionDuration = 5000 // ms5_ h/7 } = options;5_ h/7 5_ h/8 2 const canvas = document.createElement("canvas");5_ h/8 & const ctx = canvas.getContext("2d");5_ h/8 5_ h/8 canvas.width = 1000;5_ h/8 canvas.height = 300;5_ h/8 ctx.fillStyle = "black";5_ h/8 ctx.font = font;5_ h/8 ctx.textAlign = "center";5_ h/8 ctx.textBaseline = "middle";5_ h/8 : ctx.fillText(word, canvas.width / 2, canvas.height / 2);5_ h/8 5_ h/8 M const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height).data;5_ h/8 const targetPositions = [];5_ h/8 5_ h/8 7 for (let y = 0; y < canvas.height; y += resolution) {5_ h/8 8 for (let x = 0; x < canvas.width; x += resolution) {5_ h/8 + const i = (y * canvas.width + x) * 4;5_ h/8 # if (imageData[i + 3] > 128) {5_ h/8 ` targetPositions.push([x / canvas.width * 100, y / canvas.height * 100]); // convert to %5_ h/9 }5_ h/9 }5_ h/9 }5_ h/9 5_ h/9 // Shuffle and limit5_ h/9 2 targetPositions.sort(() => Math.random() - 0.5);5_ h/9 6 const selected = targetPositions.slice(0, maxStars);5_ h/9 5_ h/9 B const allStars = Array.from(document.querySelectorAll(".star"));5_ h/9 5_ h/9 % allStars.forEach((star, index) => {5_ h/9 b star.style.transition = `top ${transitionDuration}ms ease, left ${transitionDuration}ms ease`;5_ h/9 5_ h/9 " if (index < selected.length) {5_ h/9 * const [left, top] = selected[index];5_ h/9 # star.style.left = `${left}%`;5_ h/9 ! star.style.top = `${top}%`;5_ h/9 star.style.opacity = 1;5_ h/9 } else {5_ h/9 // Fade out extras5_ h/: star.style.opacity = 0;5_ h/: }5_ h/: 5_ h/: // Update position label5_ h/: setTimeout(() => {5_ h/: , star.position = getStarPosition(star);5_ h/: }, transitionDuration);5_ h/: });5_ h/: }5_ h/: 1function renderStarsAsWord2(word, options = {}) {5_ h/: const {5_ h/: # font = "bold 200px sans-serif",5_ h/: @ resolution = 1, // higher number = fewer stars, more spacing5_ h/: maxStars = 400,5_ h/; } = options;5_ h/; 5_ h/; 2 const canvas = document.createElement("canvas");5_ h/; & const ctx = canvas.getContext("2d");5_ h/; 5_ h/; canvas.width = 1000;5_ h/; canvas.height = 300;5_ h/; ctx.fillStyle = "black";5_ h/; ctx.font = font;5_ h/; ctx.textAlign = "center";5_ h/; ctx.textBaseline = "middle";5_ h/; : ctx.fillText(word, canvas.width / 2, canvas.height / 2);5_ h/; 5_ h/; M const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height).data;5_ h/< const starsToPlace = [];5_ h/< 5_ h/< 7 for (let y = 0; y < canvas.height; y += resolution) {5_ h/< 8 for (let x = 0; x < canvas.width; x += resolution) {5_ h/< / const index = (y * canvas.width + x) * 4;5_ h/< ) const alpha = imageData[index + 3];5_ h/< if (alpha > 128) {5_ h/< " starsToPlace.push([x, y]);5_ h/< }5_ h/< }5_ h/< }5_ h/< 5_ h/< , // Sort stars randomly and trim to the max5_ h/< / starsToPlace.sort(() => Math.random() - 0.5);5_ h/< 3 const selected = starsToPlace.slice(0, maxStars);5_ h/< 5_ h/< " // Clear existing stars from DOM5_ h/< > document.querySelectorAll(".star").forEach(s => s.remove());5_ h/< 3 Object.keys(stars).forEach(k => delete stars[k]);5_ h/< 5_ h/= 0 // Map canvas coordinates to percent of screen5_ h/= $ const screenW = window.innerWidth;5_ h/= % const screenH = window.innerHeight;5_ h/= 5_ h/= selected.forEach(([x, y]) => {5_ h/= / const star = document.createElement("div");5_ h/= star.classList.add("star");5_ h/= . const percentX = (x / canvas.width) * 100;5_ h/= / const percentY = (y / canvas.height) * 100;5_ h/= 5_ h/= % star.style.left = `${percentX}%`;5_ h/= $ star.style.top = `${percentY}%`;5_ h/= 5_ h/= ' const size = Math.random() * 2 + 1;5_ h/= # star.style.width = `${size}px`;5_ h/= $ star.style.height = `${size}px`;5_ h/= 5_ h/= + const duration = Math.random() * 3 + 2;5_ h/= $ const delay = Math.random() * 5;5_ h/> 2 star.style.animationDuration = `${duration}s`;5_ h/> , star.style.animationDelay = `${delay}s`;5_ h/> 5_ h/> * star.position = getStarPosition(star);5_ h/> 9 if (!stars[star.position]) stars[star.position] = [];5_ h/> $ stars[star.position].push(star);5_ h/> 5_ h/> $ document.body.appendChild(star);5_ h/> });5_ h/? }5_ h/? ,window.renderStarsAsWord = renderStarsAsWord5_ h/L starf 5_ h/U starfield = new Starfield(); 5_ h/m
.starField window.starField5_
h/q
app.starField 5_ h/t app.starField = starfield;5_ h/w ,starfield = new Starfield({starCount: 200});5_
h/x 0let starfield = new Starfield({starCount: 200});5_
h/z 4 0let starField = new Starfield({starCount: 200});5_
h/Ϭ 5 2const starField = new Starfield({starCount: 200});5_
h/ 5_
h/ 5_
h/ class StarField {5_ h/ @ constructor({ count = 200, container = document.body } = {}) {5_ h/ this.container = container;5_ h/ this.starCount = count;5_ h/ this.stars = [];5_ h/ this.positionMap = {};5_ h/ l this.originalColor = getComputedStyle(document.documentElement).getPropertyValue("--star-color").trim();5_ h/ this._createStars();5_ h/ $ window.stars = this.positionMap;5_ h/ }5_ h/ 5_ h/ _getStarPosition(star) {5_ h/ - const left = parseFloat(star.style.left);5_ h/ + const top = parseFloat(star.style.top);5_ h/ = if (top < 40 && left >= 40 && left <= 60) return "North";5_ h/ = if (top > 60 && left >= 40 && left <= 60) return "South";5_ h/ ; if (left < 40 && top >= 40 && top <= 60) return "West";5_ h/ ; if (left > 60 && top >= 40 && top <= 60) return "East";5_ ! h/ L if (top >= 40 && top <= 60 && left >= 40 && left <= 60) return "Center";5_ " ! h/ return "Corner or Edge";5_ ! # " h/ }5_ " $ # h/ 5_ # % $ h/ _createStars() {5_ $ & % h/ . for (let i = 0; i < this.starCount; i++) {5_ % ' & h/ 1 const star = document.createElement("div");5_ & ( ' h/ ! star.classList.add("star");5_ ' ) ( h/ this._randomizeStar(star);5_ ( * ) h/ this._placeStar(star);5_ ) + * h/ ' this.container.appendChild(star);5_ * , + h/ this.stars.push(star);5_ + - , h/ }5_ , . - h/ }5_ - / . h/ 5_ . 0 / h/ _randomizeStar(star) {5_ / 1 0 h/ 0 star.style.left = `${Math.random() * 100}%`;5_ 0 2 1 h/ / star.style.top = `${Math.random() * 100}%`;5_ 1 3 2 h/ 4 star.style.width = `${Math.random() * 2 + 1}px`;5_ 2 4 3 h/ 5 star.style.height = `${Math.random() * 2 + 1}px`;5_ 3 5 4 h/ ? star.style.animationDuration = `${Math.random() * 3 + 2}s`;5_ 4 6 5 h/ 8 star.style.animationDelay = `${Math.random() * 5}s`;5_ 5 7 6 h/ % star.style.position = "absolute";5_ 6 8 7 h/ I star.style.transition = "top 1s ease, left 1s ease, opacity 1s ease";5_ 7 9 8 h/ 5_ 8 : 9 h/ 3 star.shuffle = () => this._randomizeStar(star);5_ 9 ; : h/ 0 star.position = this._getStarPosition(star);5_ : < ; h/ }5_ ; = < h/ 5_ < > = h/ _placeStar(star) {5_ = ? > h/ const pos = star.position;5_ > @ ? h/ ; if (!this.positionMap[pos]) this.positionMap[pos] = [];5_ ? A @ h/ % this.positionMap[pos].push(star);5_ @ B A h/ }5_ A C B h/ 5_ B D C h/ shuffleAll() {5_ C E D h/ this.stars.forEach(star => {5_ D F E h/ this._randomizeStar(star);5_ E G F h/ 2 star.position = this._getStarPosition(star);5_ F H G h/ });5_ G I H h/ }5_ H J I h/ 5_ I K J h/ ) glowColor(tempColor, duration = 2500) {5_ J L K h/ ' const lighten = (hex, percent) => {5_ K M L h/ 5 const num = parseInt(hex.replace("#", ""), 16);5_ L N M h/ M const r = Math.min(255, (num >> 16) + Math.round(255 * percent / 100));5_ M O N h/ U const g = Math.min(255, ((num >> 8) & 0xff) + Math.round(255 * percent / 100));5_ N P O h/ N const b = Math.min(255, (num & 0xff) + Math.round(255 * percent / 100));5_ O Q P h/ J return `#${(1 << 24 | r << 16 | g << 8 | b).toString(16).slice(1)}`;5_ P R Q h/ };5_ Q S R h/ 5_ R T S h/ ( const glow = lighten(tempColor, 10);5_ S U T h/ E document.documentElement.style.setProperty("--star-color", glow);5_ T V U h/ setTimeout(() => {5_ U W V h/ U document.documentElement.style.setProperty("--star-color", this.originalColor);5_ V X W h/ }, duration);5_ W Y X h/ }5_ X Z Y h/ 5_ Y [ Z h/ ^ renderWord(word, { font = "bold 100px sans-serif", resolution = 4, duration = 1500 } = {}) {5_ Z \ [ h/ 4 const canvas = document.createElement("canvas");5_ [ ] \ h/ ( const ctx = canvas.getContext("2d");5_ \ ^ ] h/ canvas.width = 1000;5_ ] _ ^ h/ canvas.height = 300;5_ ^ ` _ h/ ctx.fillStyle = "black";5_ _ a ` h/ ctx.font = font;5_ ` b a h/ ctx.textAlign = "center";5_ a c b h/ ctx.textBaseline = "middle";5_ b d c h/ < ctx.fillText(word, canvas.width / 2, canvas.height / 2);5_ c e d h/ 5_ d f e h/ O const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height).data;5_ e g f h/ const targetPositions = [];5_ f h g h/ 5_ g i h h/ 9 for (let y = 0; y < canvas.height; y += resolution) {5_ h j i h/ : for (let x = 0; x < canvas.width; x += resolution) {5_ i k j h/ - const i = (y * canvas.width + x) * 4;5_ j l k h/ % if (imageData[i + 3] > 128) {5_ k m l
h/ targetPositions.push([5_ l n m h/ % (x / canvas.width) * 100,5_ m o n h/ & (y / canvas.height) * 100,5_ n p o
h/
]);5_ o q p h/ }5_ p r q h/ }5_ q s r h/ }5_ r t s h/ 5_ s u t h/ 4 targetPositions.sort(() => Math.random() - 0.5);5_ t v u h/ = const used = targetPositions.slice(0, this.stars.length);5_ u w v h/ 5_ v x w h/ % this.stars.forEach((star, i) => {5_ w y x h/ l star.style.transition = `top ${duration}ms ease, left ${duration}ms ease, opacity ${duration}ms ease`;5_ x z y h/ if (i < used.length) {5_ y { z h/ $ const [left, top] = used[i];5_ z | { h/ % star.style.left = `${left}%`;5_ { } | h/ # star.style.top = `${top}%`;5_ | ~ } h/ star.style.opacity = 1;5_ } ~ h/ } else {5_ ~ h/ star.style.opacity = 0;5_ h/ }5_ h/ });5_ h/ 5_ h/ setTimeout(() => {5_ h/ " this.stars.forEach(star => {5_ h/ 4 star.position = this._getStarPosition(star);5_ h/ });5_ h/ }, duration);5_ h/ }5_ h/ }5_ h/ 5_ h/ }5_ h/ 5_ v h/ /starField.renderWord("WOW", { rainbow: true }); starField.explodeAndReturn(); starField.startColorCycle(); 4setTimeout(() => starField.stopColorCycle(), 10000); starField.shuffleAll(2000);5_ v h/ 3 starField.renderWord("WOW", { rainbow: true });5_ v h/ 7 starField.renderWord("WOW", { rainbow: true });5_ v h/ 3 starField.renderWord("WOW", { rainbow: true });5_ v h/ 5_ v h/ 3 starField.renderWord("WOW", { rainbow: true });5_ v h/ 0 starField.renderWord("", { rainbow: true });5_ v h/!
disco(){5_ v h/# 6 disco(word){5_ v h// 7 },5_ h/ setTime starField.shuffleAll(2000);5_ h/ 5_ h/ 5_ h/ starField.shuffleAll(2000); starField.shuffleAll(2000);5_ h/ })5_ h/ 8 # starField.shuffleAll(2000);5_ h/҄ 5_ h/ґ notify(word_{5_ h/Ғ 5_ h/Қ let starField = this 5_ h/Ҧ A 4 let starField = new StarField({starCount: 200});5_ h/V B 5_ h/ 5_ h/ 5_ h/ 5_ h/ 5_ h/ 5_ h/ 5_ h/ 5_ h/ 5_ h/ 5_ h/ 5_ h/ 5_ h/ 5_ h/ 5_ h/ 5_ h/ 5_ h/ class StarField {5_ h/ @ constructor({ count = 200, container = document.body } = {}) {5_ h/ this.container = container;5_ h/ this.starCount = count;5_ h/ this.stars = [];5_ h/ this.positionMap = {};5_ h/ l this.originalColor = getComputedStyle(document.documentElement).getPropertyValue("--star-color").trim();5_ h/ this._createStars();5_ h/ $ window.stars = this.positionMap;5_ h/ }5_ h/ 5_ h/ _getStarPosition(star) {5_ h/ - const left = parseFloat(star.style.left);5_ h/ + const top = parseFloat(star.style.top);5_ h/ = if (top < 40 && left >= 40 && left <= 60) return "North";5_ h/ = if (top > 60 && left >= 40 && left <= 60) return "South";5_ h/ ; if (left < 40 && top >= 40 && top <= 60) return "West";5_ h/ ; if (left > 60 && top >= 40 && top <= 60) return "East";5_ h/ L if (top >= 40 && top <= 60 && left >= 40 && left <= 60) return "Center";5_ h/ return "Corner or Edge";5_ h/ }5_ h/ 5_ h/ _createStars() {5_ h/ . for (let i = 0; i < this.starCount; i++) {5_ h/ 1 const star = document.createElement("div");5_ h/ ! star.classList.add("star");5_ h/ this._randomizeStar(star);5_ h/ this._placeStar(star);5_ h/ ' this.container.appendChild(star);5_ h/ this.stars.push(star);5_ h/ }5_ h/ }5_ h/ 5_ h/ _randomizeStar(star) {5_ h/ 0 star.style.left = `${Math.random() * 100}%`;5_ h/ / star.style.top = `${Math.random() * 100}%`;5_ h/ 4 star.style.width = `${Math.random() * 2 + 1}px`;5_ h/ 5 star.style.height = `${Math.random() * 2 + 1}px`;5_ h/ ? star.style.animationDuration = `${Math.random() * 3 + 2}s`;5_ h/ 8 star.style.animationDelay = `${Math.random() * 5}s`;5_ h/ % star.style.position = "absolute";5_ h/ I star.style.transition = "top 1s ease, left 1s ease, opacity 1s ease";5_ h/ 5_ h/ 3 star.shuffle = () => this._randomizeStar(star);5_ h/ 0 star.position = this._getStarPosition(star);5_ h/ }5_ h/ 5_ h/ _placeStar(star) {5_ h/ const pos = star.position;5_ h/ ; if (!this.positionMap[pos]) this.positionMap[pos] = [];5_ h/ % this.positionMap[pos].push(star);5_ h/ }5_ h/ 5_ h/ shuffleAll(duration = 1000) {5_ h/ this.stars.forEach(star => {5_ h/ l star.style.transition = `top ${duration}ms ease, left ${duration}ms ease, opacity ${duration}ms ease`;5_ h/ 7 star.style.filter = "drop-shadow(0 0 2px white)"; ' const left = Math.random() * 100;5_ h/ 5_ h/ 5_ h/ 5_ h/ 5_ h/ 5_ h/ & const top = Math.random() * 100;5_ h/ # star.style.left = `${left}%`;5_ h/ ! star.style.top = `${top}%`;5_
h/ 5_
h/ setTimeout(() => {5_
h/ star.style.filter = "";5_
h/ 4 star.position = this._getStarPosition(star);5_
h/ }, duration);5_
h/ });5_ h/ }5_ h/ 5_ h/ ) glowColor(tempColor, duration = 2500) {5_ h/ ' const lighten = (hex, percent) => {5_ h/ 5 const num = parseInt(hex.replace("#", ""), 16);5_ h/ M const r = Math.min(255, (num >> 16) + Math.round(255 * percent / 100));5_ h/ U const g = Math.min(255, ((num >> 8) & 0xff) + Math.round(255 * percent / 100));5_ h/ N const b = Math.min(255, (num & 0xff) + Math.round(255 * percent / 100));5_ h/ J return `#${(1 << 24 | r << 16 | g << 8 | b).toString(16).slice(1)}`;5_ h/ };5_ h/ 5_ h/ ( const glow = lighten(tempColor, 10);5_ h/ E document.documentElement.style.setProperty("--star-color", glow);5_ h/ setTimeout(() => {5_ h/ U document.documentElement.style.setProperty("--star-color", this.originalColor);5_ h/ }, duration);5_ h/ }5_ ! h/ 5_ " ! h/ o renderWord(word, { font = "bold 100px sans-serif", resolution = 4, duration = 1500, rainbow = false } = {}) {5_ ! # " h/ 4 const canvas = document.createElement("canvas");5_ " $ # h/ ( const ctx = canvas.getContext("2d");5_ # % $ h/ canvas.width = 1000;5_ $ & % h/ canvas.height = 300;5_ % ' & h/ ctx.fillStyle = "black";5_ & ( ' h/ ctx.font = font;5_ ' ) ( h/ ctx.textAlign = "center";5_ ( * ) h/ ctx.textBaseline = "middle";5_ ) + * h/ < ctx.fillText(word, canvas.width / 2, canvas.height / 2);5_ * , + h/ 5_ + - , h/ O const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height).data;5_ , . - h/ const targetPositions = [];5_ - / . h/ 5_ . 0 / h/ 9 for (let y = 0; y < canvas.height; y += resolution) {5_ / 1 0 h/ : for (let x = 0; x < canvas.width; x += resolution) {5_ 0 2 1 h/ - const i = (y * canvas.width + x) * 4;5_ 1 3 2 h/ % if (imageData[i + 3] > 128) {5_ 2 4 3
h/ targetPositions.push([5_ 3 5 4 h/ % (x / canvas.width) * 100,5_ 4 6 5 h/ & (y / canvas.height) * 100,5_ 5 7 6
h/
]);5_ 6 8 7 h/ }5_ 7 9 8 h/ }5_ 8 : 9 h/ }5_ 9 ; : h/ 5_ : < ; h/ 4 targetPositions.sort(() => Math.random() - 0.5);5_ ; = < h/ = const used = targetPositions.slice(0, this.stars.length);5_ < > = h/ 5_ = ? > h/ % this.stars.forEach((star, i) => {5_ > @ ? h/ star.style.transition = `top ${duration}ms ease, left ${duration}ms ease, opacity ${duration}ms ease, background-color 1s ease`;5_ ? A @ h/ if (i < used.length) {5_ @ B A h/ $ const [left, top] = used[i];5_ A C B h/ % star.style.left = `${left}%`;5_ B D C h/ # star.style.top = `${top}%`;5_ C E D h/ star.style.opacity = 1;5_ D F E h/ if (rainbow) {5_ E G F
h/ . const hue = (i / used.length) * 360;5_ F H G
h/ @ star.style.backgroundColor = `hsl(${hue}, 100%, 70%)`;5_ G I H h/ }5_ H J I h/ } else {5_ I K J h/ star.style.opacity = 0;5_ J L K h/ }5_ K M L h/ });5_ L N M h/ 5_ M O N h/ setTimeout(() => {5_ N P O h/ " this.stars.forEach(star => {5_ O Q P h/ 4 star.position = this._getStarPosition(star);5_ P R Q h/ 5 if (rainbow) star.style.backgroundColor = "";5_ Q S R h/ });5_ R T S h/ }, duration);5_ S U T h/ }5_ T V U h/ 5_ U W V h/ % explodeAndReturn(duration = 1000) {5_ V X W h/ 7 const originalPositions = this.stars.map(star => ({5_ W Y X h/ left: star.style.left,5_ X Z Y h/ top: star.style.top5_ Y [ Z h/ }));5_ Z \ [ h/ 5_ [ ] \ h/ this.stars.forEach(star => {5_ \ ^ ] h/ 0 const angle = Math.random() * 2 * Math.PI;5_ ] _ ^ h/ ) const radius = Math.random() * 200;5_ ^ ` _ h/ . const x = 50 + Math.cos(angle) * radius;5_ _ a ` h/ . const y = 50 + Math.sin(angle) * radius;5_ ` b a h/ ` star.style.transition = `top ${duration / 2}ms ease-out, left ${duration / 2}ms ease-out`;5_ a c b h/ star.style.left = `${x}%`;5_ b d c h/ star.style.top = `${y}%`;5_ c e d h/ });5_ d f e h/ 5_ e g f h/ setTimeout(() => {5_ f h g h/ ' this.stars.forEach((star, i) => {5_ g i h h/ X star.style.transition = `top ${duration}ms ease-in, left ${duration}ms ease-in`;5_ h j i h/ 4 star.style.left = originalPositions[i].left;5_ i k j h/ 2 star.style.top = originalPositions[i].top;5_ j l k h/ });5_ k m l h/ }, duration / 2);5_ l n m h/ }5_ m o n h/ 5_ n p o h/ startColorCycle() {5_ o q p h/ let hue = 0;5_ p r q h/ @ if (this._colorInterval) clearInterval(this._colorInterval);5_ q s r h/ - this._colorInterval = setInterval(() => {5_ r t s h/ hue = (hue + 2) % 360;5_ s u t h/ ' this.stars.forEach((star, i) => {5_ t v u h/ N star.style.backgroundColor = `hsl(${(hue + i * 3) % 360}, 100%, 75%)`;5_ u w v h/ });5_ v x w h/ }, 100);5_ w y x h/ }5_ x z y h/ 5_ y { z h/ stopColorCycle() {5_ z | { h/ if (this._colorInterval) {5_ { } | h/ ) clearInterval(this._colorInterval);5_ | ~ } h/ ! this._colorInterval = null;5_ } ~ h/ B this.stars.forEach(star => star.style.backgroundColor = "");5_ ~ h/ }5_ h/ }5_ h/ notify(word){5_ h/ 5_ h/ 4 let starField = new StarField({starCount: 200});5_ h/ 2 starField.renderWord(word, { rainbow: true });5_ h/ ! starField.explodeAndReturn();5_ h/ starField.startColorCycle();5_ h/ 8 setTimeout(() => starField.stopColorCycle(), 10000);5_ h/ starField.shuffleAll(2000);5_ h/ setTimeout(() => {5_ h/ # starField.shuffleAll(3000);5_ h/ },5000)5_ h/ }5_ h/ disco(word){5_ h/ 5_ h/ let starField = this5_ h/ 2 starField.renderWord(word, { rainbow: true });5_ h/ ! starField.explodeAndReturn();5_ h/ starField.startColorCycle();5_ h/ 8 setTimeout(() => starField.stopColorCycle(), 10000);5_ h/ starField.shuffleAll(2000);5_ h/ setTimeout(() => {5_ h/ # starField.shuffleAll(3000);5_ h/ },5000)5_ h/ }5_ h/ }5_ h/ C }5_ h/ 5_ h/ .5_ h/g 5_ h/i 5_ h/n class StarField {5_ h/n @ constructor({ count = 200, container = document.body } = {}) {5_ h/n this.container = container;5_ h/n this.starCount = count;5_ h/n this.stars = [];5_ h/n this.positionMap = {};5_ h/n l this.originalColor = getComputedStyle(document.documentElement).getPropertyValue("--star-color").trim();5_ h/n this._createStars();5_ h/o $ window.stars = this.positionMap;5_ h/o }5_ h/o 5_ h/o _getStarPosition(star) {5_ h/o - const left = parseFloat(star.style.left);5_ h/o + const top = parseFloat(star.style.top);5_ h/o = if (top < 40 && left >= 40 && left <= 60) return "North";5_ h/o = if (top > 60 && left >= 40 && left <= 60) return "South";5_ h/o ; if (left < 40 && top >= 40 && top <= 60) return "West";5_ h/o ; if (left > 60 && top >= 40 && top <= 60) return "East";5_ h/o L if (top >= 40 && top <= 60 && left >= 40 && left <= 60) return "Center";5_ h/o return "Corner or Edge";5_ h/o }5_ h/o 5_ h/o _createStars() {5_ h/o . for (let i = 0; i < this.starCount; i++) {5_ h/o 1 const star = document.createElement("div");5_ h/o ! star.classList.add("star");5_ h/o this._randomizeStar(star);5_ h/p this._placeStar(star);5_ h/p 5_ h/p ( // Interaction: click to highlight5_ h/p , star.addEventListener("click", () => {5_ h/p : star.style.filter = "drop-shadow(0 0 5px yellow)";5_ h/p , star.style.transform = "scale(1.5)";5_ h/p 9 console.log(`Clicked star in: ${star.position}`);5_ h/p setTimeout(() => {5_
h/p ! star.style.filter = "";5_
h/p $ star.style.transform = "";5_ h/p }, 500);5_ h/p });5_ h/p 5_ h/p ' this.container.appendChild(star);5_ h/p this.stars.push(star);5_ h/p }5_ h/p }5_ h/p 5_ h/p _randomizeStar(star) {5_ h/q 0 star.style.left = `${Math.random() * 100}%`;5_ h/q / star.style.top = `${Math.random() * 100}%`;5_ h/q 4 star.style.width = `${Math.random() * 2 + 1}px`;5_ h/q 5 star.style.height = `${Math.random() * 2 + 1}px`;5_ h/q 8 star.style.animationDelay = `${Math.random() * 2}s`;5_ h/q % star.style.position = "absolute";5_ h/q I star.style.transition = "top 1s ease, left 1s ease, opacity 1s ease";5_ h/q 5_ h/q 3 star.shuffle = () => this._randomizeStar(star);5_ h/q 0 star.position = this._getStarPosition(star);5_ h/q }5_ h/r 5_ h/r _placeStar(star) {5_ h/r const pos = star.position;5_ h/r ; if (!this.positionMap[pos]) this.positionMap[pos] = [];5_ h/r % this.positionMap[pos].push(star);5_ h/r }5_ h/r 5_ h/r shuffleAll(duration = 1000) {5_ h/r this.stars.forEach(star => {5_ h/r l star.style.transition = `top ${duration}ms ease, left ${duration}ms ease, opacity ${duration}ms ease`;5_ h/r 7 star.style.filter = "drop-shadow(0 0 2px white)";5_ h/r 5_ h/r 5_ h/s 5_ h/s 5_ h/s 5_ h/s 5_ h/t ' const left = Math.random() * 100;5_ h/} & const top = Math.random() * 100;5_ h/ہ # star.style.left = `${left}%`;5_ h/ہ ! star.style.top = `${top}%`;5_ h/ہ 5_ h/ہ setTimeout(() => {5_ h/ہ star.style.filter = "";5_ h/ہ 4 star.position = this._getStarPosition(star);5_ h/ہ }, duration);5_ h/ہ });5_ h/ہ }5_ h/ۃ 5_ h/ۃ 5_ h/ۃ 5_ h/ۃ 5_ h/ۃ 5_ h/ۃ 5_ h/ۃ 5_ h/ۃ 5_ h/ۃ 5_ h/ۃ 5_ h/ۃ 5_ h/ۃ 5_ h/ۃ 5_ h/ۃ 5_ h/ۃ ) glowColor(tempColor, duration = 2500) {5_ h/ۄ ' const lighten = (hex, percent) => {5_ h/ۄ 5 const num = parseInt(hex.replace("#", ""), 16);5_ h/ۄ M const r = Math.min(255, (num >> 16) + Math.round(255 * percent / 100));5_ h/ۄ U const g = Math.min(255, ((num >> 8) & 0xff) + Math.round(255 * percent / 100));5_ h/ۄ N const b = Math.min(255, (num & 0xff) + Math.round(255 * percent / 100));5_ h/ۄ J return `#${(1 << 24 | r << 16 | g << 8 | b).toString(16).slice(1)}`;5_
h/ۄ };5_
h/ۄ 5_
h/ۄ ( const glow = lighten(tempColor, 10);5_
h/ۄ E document.documentElement.style.setProperty("--star-color", glow);5_
h/ۄ setTimeout(() => {5_
h/ۄ U document.documentElement.style.setProperty("--star-color", this.originalColor);5_ h/ۄ }, duration);5_ h/ۄ }5_ h/ۄ 5_ h/ۄ ^ renderWord(word, { font = "bold", resolution = 4, duration = 1500, rainbow = false } = {}) {5_ h/ۄ 4 const canvas = document.createElement("canvas");5_ h/ۄ ( const ctx = canvas.getContext("2d");5_ h/ۄ . canvas.width = this.container.clientWidth;5_ h/ۅ 4 canvas.height = this.container.clientHeight / 3;5_ h/ۅ 5_ h/ۅ 5 const fontSize = Math.floor(canvas.height / 2.5);5_ h/ۅ * ctx.font = `${fontSize}px sans-serif`;5_ h/ۅ ctx.fillStyle = "black";5_ h/ۅ ctx.textAlign = "center";5_ h/ۅ ctx.textBaseline = "middle";5_ h/ۅ < ctx.fillText(word, canvas.width / 2, canvas.height / 2);5_ h/ۅ 5_ h/ۅ O const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height).data;5_ ! h/ۅ const targetPositions = [];5_ " ! h/ۅ 5_ ! # " h/ۅ 9 for (let y = 0; y < canvas.height; y += resolution) {5_ " $ # h/ۅ : for (let x = 0; x < canvas.width; x += resolution) {5_ # % $ h/ۅ - const i = (y * canvas.width + x) * 4;5_ $ & % h/ۅ % if (imageData[i + 3] > 128) {5_ % ' &
h/ۅ targetPositions.push([5_ & ( ' h/ۅ % (x / canvas.width) * 100,5_ ' ) ( h/ۅ & (y / canvas.height) * 100,5_ ( * )
h/ۅ
]);5_ ) + * h/ۆ }5_ * , + h/ۆ }5_ + - , h/ۆ }5_ , . - h/ۆ 5_ - / . h/ۆ 4 targetPositions.sort(() => Math.random() - 0.5);5_ . 0 / h/ۆ = const used = targetPositions.slice(0, this.stars.length);5_ / 1 0 h/ۆ 5_ 0 2 1 h/ۆ % this.stars.forEach((star, i) => {5_ 1 3 2 h/ۆ star.style.transition = `top ${duration}ms ease, left ${duration}ms ease, opacity ${duration}ms ease, background-color 1s ease`;5_ 2 4 3 h/ۆ if (i < used.length) {5_ 3 5 4 h/ۆ $ const [left, top] = used[i];5_ 4 6 5 h/ۆ % star.style.left = `${left}%`;5_ 5 7 6 h/ۆ # star.style.top = `${top}%`;5_ 6 8 7 h/ۆ star.style.opacity = 1;5_ 7 9 8 h/ۆ if (rainbow) {5_ 8 : 9
h/ۆ . const hue = (i / used.length) * 360;5_ 9 ; :
h/ۆ @ star.style.backgroundColor = `hsl(${hue}, 100%, 70%)`;5_ : < ; h/ۆ }5_ ; = < h/ۆ } else {5_ < > = h/ۇ star.style.opacity = 0;5_ = ? > h/ۇ }5_ > @ ? h/ۇ });5_ ? A @ h/ۇ 5_ @ B A h/ۇ setTimeout(() => {5_ A C B h/ۇ " this.stars.forEach(star => {5_ B D C h/ۇ 4 star.position = this._getStarPosition(star);5_ C E D h/ۇ 5 if (rainbow) star.style.backgroundColor = "";5_ D F E h/ۇ });5_ E G F h/ۇ }, duration);5_ F H G h/ۇ }5_ G I H h/ۇ 5_ H J I h/ۇ % explodeAndReturn(duration = 1000) {5_ I K J h/ۇ 7 const originalPositions = this.stars.map(star => ({5_ J L K h/ۇ left: star.style.left,5_ K M L h/ۇ top: star.style.top5_ L N M h/ۇ }));5_ M O N h/ۇ 5_ N P O h/ۇ this.stars.forEach(star => {5_ O Q P h/ۈ 0 const angle = Math.random() * 2 * Math.PI;5_ P R Q h/ۈ ) const radius = Math.random() * 200;5_ Q S R h/ۈ . const x = 50 + Math.cos(angle) * radius;5_ R T S h/ۈ . const y = 50 + Math.sin(angle) * radius;5_ S U T h/ۈ ` star.style.transition = `top ${duration / 2}ms ease-out, left ${duration / 2}ms ease-out`;5_ T V U h/ۈ star.style.left = `${x}%`;5_ U W V h/ۈ star.style.top = `${y}%`;5_ V X W h/ۈ });5_ W Y X h/ۈ 5_ X Z Y h/ۈ setTimeout(() => {5_ Y [ Z h/ۈ ' this.stars.forEach((star, i) => {5_ Z \ [ h/ۈ X star.style.transition = `top ${duration}ms ease-in, left ${duration}ms ease-in`;5_ [ ] \ h/ۈ 4 star.style.left = originalPositions[i].left;5_ \ ^ ] h/ۈ 2 star.style.top = originalPositions[i].top;5_ ] _ ^ h/ۈ });5_ ^ ` _ h/ۈ }, duration / 2);5_ _ a ` h/ۈ }5_ ` b a h/ۈ 5_ a c b h/ۈ startColorCycle() {5_ b d c h/ۉ let hue = 0;5_ c e d h/ۉ @ if (this._colorInterval) clearInterval(this._colorInterval);5_ d f e h/ۉ - this._colorInterval = setInterval(() => {5_ e g f h/ۉ hue = (hue + 2) % 360;5_ f h g h/ۉ ' this.stars.forEach((star, i) => {5_ g i h h/ۉ N star.style.backgroundColor = `hsl(${(hue + i * 3) % 360}, 100%, 75%)`;5_ h j i h/ۉ });5_ i k j h/ۉ }, 100);5_ j l k h/ۉ }5_ k m l h/ۉ 5_ l n m h/ۉ stopColorCycle() {5_ m o n h/ۉ if (this._colorInterval) {5_ n p o h/ۉ ) clearInterval(this._colorInterval);5_ o q p h/ۉ ! this._colorInterval = null;5_ p r q h/ۉ B this.stars.forEach(star => star.style.backgroundColor = "");5_ q s r h/ۉ }5_ r t s h/ۉ }5_ s u t h/ۉ 5_ t v u h/ۉ notify(word) {5_ u w v h/ۉ - this.renderWord(word, { rainbow: true });5_ v x w h/ۊ this.explodeAndReturn();5_ w y x h/ۊ this.startColorCycle();5_ x z y h/ۊ 3 setTimeout(() => this.stopColorCycle(), 10000);5_ y { z h/ۊ this.shuffleAll(2000);5_ z | { h/ۊ setTimeout(() => {5_ { } | h/ۊ this.shuffleAll(3000);5_ | ~ } h/ۊ
}, 5000);5_ } ~ h/ۊ }5_ ~ h/ۊ 5_ h/ۊ disco(word) {5_ h/ۋ - this.renderWord(word, { rainbow: true });5_ h/ۋ this.explodeAndReturn();5_ h/ۋ this.startColorCycle();5_ h/ۋ 3 setTimeout(() => this.stopColorCycle(), 10000);5_ h/ۋ this.shuffleAll(2000);5_ h/ۋ setTimeout(() => {5_ h/ۋ this.shuffleAll(3000);5_ h/ۋ
}, 5000);5_ h/ۋ }5_ h/ۋ 5_ h/ی -addSpecialStar({ title, content, onClick }) {5_ h/ی 6 const star = this.stars.find(s => !s._dataAttached);5_ h/ی if (!star) return;5_ h/ی 5_ h/ی star.classList.add("special");5_ h/ی star._dataAttached = true;5_ h/ی 2 star._specialData = { title, content, onClick };5_ h/ی 5_ h/ی const showPopup = (e) => {5_ h/ی e.stopPropagation();5_ h/ی - this._showPopup(star, star._specialData);5_ h/ی , if (onClick) onClick(star._specialData);5_ h/ی };5_ h/ی 5_ h/ی , star.addEventListener("click", showPopup);5_ h/ی / star.addEventListener("touchend", showPopup);5_ h/ی }5_ h/ی 5_ h/ی _showPopup(star, data) {5_ h/ۍ 6 const popup = document.getElementById("star-popup");5_ h/ۍ G popup.innerHTML = `${data.title}
${data.content}
`;5_ h/ۍ popup.style.display = "block";5_ h/ۍ 5_ h/ۍ % // Position the popup near the star5_ h/ۍ , const rect = star.getBoundingClientRect();5_ h/ۍ < popup.style.left = `${rect.left + window.scrollX + 10}px`;5_ h/ۍ : popup.style.top = `${rect.top + window.scrollY + 10}px`;5_ h/ۍ 5_ h/ۍ + // Auto-close popup when clicking outside5_ h/ۍ const closeHandler = () => {5_ h/ۍ ! popup.style.display = "none";5_ h/ۍ 8 document.removeEventListener("click", closeHandler);5_ h/ۍ };5_ h/ۍ J setTimeout(() => document.addEventListener("click", closeHandler), 100);5_ h/ۍ }5_ h/ۍ }5_ h/ۍ D 5_
h/ 5_ h/ E
H 5_ G h/$ F F _ J 5_ 6 h/! 5 8 a 5_ 6 h/" 5 : b 5_ 2 h/$ 1 3 e _showOverlay(text) {5_ 2 h/& 1 2 ddd _showOverlay(text) {5_ 2 h/& 1 2 " this.overlay.innerText = text;5_ 2 h/' 1 2 # this.overlay.style.opacity = 1;5_ 2 h/' G 1 2 }5_ h/ a _runStep(index) {5_ h/ 3 b b i5_ 3 h/ 2 3 _runStep(index) {5_ 3 h/ 2 3 % if (index >= this.steps.length) {5_ 3 h/ 2 3 this._clearOverlay();5_ 3 h/ 2 3
return;5_ 3 h/ 2 3 }5_ 3 h/ 2 3 5_ 3 h/ 2 3 @ const { target, text, duration = 3000 } = this.steps[index];5_ 3 h/ 2 3 this._clearHighlights();5_ 3 h/ 2 3 this._showOverlay(text);5_ 3 h/ 2 3 5_ 3 h/ 2 3 if (target) {5_ 3 h/ 2 3 V const el = typeof target === 'string' ? document.querySelector(target) : target;5_ 3 h/ 2 3 if (el) {5_ 3 h/ 2 3 + el.classList.add("demo-highlight");5_ 3 h/ 2 3 C el.scrollIntoView({ behavior: "smooth", block: "center" });5_ 3 h/ 2 3 }5_ 3 h/ 2 3 }5_ 3 h/ 2 3 5_ 3 h/ 2 3 setTimeout(() => {5_ 3 h/ 2 3 this._hideOverlay();5_ 3 h/ 2 3 this._runStep(index + 1);5_ 3 h/ 2 3 }, duration);5_ 3 h/ H 2 3 }5_ K - h/ J L c 0 text: "💬 Welcome to your Galactic Chat!",5_ O ; h/ I N P c ; target: ".channels-list", // any selector from your app5_ H h/3 G K c }5_ _ h/6 ^ ` e ]);5_ b h/; a c e
demo.start();5_ Z 2 h/ J Y [ e ^ renderWord(word, { font = "bold", resolution = 4, duration = 1500, rainbow = false } = {}) {5_ Y h/_ X \ e 5_ Z h/` Y i g 5_ Z h Z v h/c K Y i u &showNotify(message, duration = 3000) { / const notify = document.createElement("div"); notify.innerText = message; # notify.className = "star-notify"; $ document.body.appendChild(notify); // Animate in 1 setTimeout(() => notify.style.opacity = 1, 10); // Remove after duration setTimeout(() => { notify.style.opacity = 0; , setTimeout(() => notify.remove(), 1000); }, duration); }5_ Y h/ W x u } X Z u 5_ x h/ w x * showNotify(message, duration = 3000) {5_ x h/ w x 3 const notify = document.createElement("div");5_ x h/ w x ! notify.innerText = message;5_ x h/ w x ' notify.className = "star-notify";5_ x h/ w x ( document.body.appendChild(notify);5_ x h/ w x 5_ x h/ w x // Animate in5_ x h/ w x 5 setTimeout(() => notify.style.opacity = 1, 10);5_ x h/ w x 5_ x h/ w x // Remove after duration5_ x h/ w x setTimeout(() => {5_ x h/ w x ! notify.style.opacity = 0;5_ x h/ w x 0 setTimeout(() => notify.remove(), 1000);5_ x h/ w x }, duration);5_ x h/ L w x }5_ a h/O ` b a b a b 5_ a _ h/o M ` c ` let exists = document.querySelector(".star-notify").filter(note => note.textContent === text); a b a b 5_ a h/ N ` b k let exists = document.querySelector(".star-notify").filter(note => note.textContent === text).length > 0;5_ a p h/v ` b p let exists = document.body.querySelector(".star-notify").filter(note => note.textContent === text).length > 0;5_ a r h/y ` b r let exists = document.body.querySelector(".star-notify").filter(note => note.textContent === text).length > 0;ll5_ a * h/} O ` b p let exists = document.body.querySelector(".star-notify").filter(note => note.textContent === text).length > 0;5_ a = h/ ` b s let exists = document.body.querySelectorAll(".star-notify").filter(note => note.textContent === text).length > 0;5_ a g h/ ` b s let exists = document.body.querySelectorAll(".star-notify").filter(note => note.textContent === text).length > 0;5_ ` h/% _ b }5_ a h/( ` f 5_ a h/* ` b 2const ponies = document.querySelectorAll('.pony');5_ a h/, ` b 6 const ponies = document.querySelectorAll('.pony');5_ d h/0 c e [const countHihi = Array.from(ponies).filter(el => el.textContent.trim() === 'hihi').length;5_ d h/3 c e Wconst count = Array.from(ponies).filter(el => el.textContent.trim() === 'hihi').length;5_ d P h/8 c e Yconst count = Array.from(messages).filter(el => el.textContent.trim() === 'hihi').length;5_ a 5 h/? ` b 8 const messages = document.querySelectorAll('.pony');5_ f h/E e f s let exists = document.body.querySelectorAll(".star-notify").filter(note => note.textContent === text).length > 0;5_ f h/G P e g if (exists) return;5_ c h/N Q b c ?// Count how many of these elements have content exactly "hihi"5_ $ hHT
$ window.stars = this.positionMap;5_ hHT 5_ hHT D const starSignal = (() => {5_
hHT D const starSignal = (() => {5_
hHT D this.starSignal = (() => {5_
hHT E this.trigger = starS E D }5_
! hHT E " this.trigger = starSignal; E 5_
hHT E * this.trigger = starSignal.trigger;5_
hHT E A console.warn('Unknown star signal:', signalName);5_ hHT R F default: F 5_ hHUk E 5_ hHUm F 5_ hHUw I I 5_ hHU d notify('info', args);5_ hHU d this.notify('info', args);5_ hHU d this.shownotify('info', args);5_ hHU d notify('warn', args);5_ hHU d & this.showNotifynotify('warn', args);5_ hHU d notify('error', args);5_ hHU d notify('log', args);5_ % hHU d & this.showNotify(notify('log', args);5_ ' hHU d ( this.showNotify(notify('error', args);5_ hHU d this.showNotify('warn', args);5_ hHU d ! this.showNotify('warn', args));5_ ( hHU d ) this.showNotify(notify('error', args));5_ & hHU d ' this.showNotify(notify('log', args));5_ ! hHU d & this.showNotify(notify('log', args);5_ " ! hHU d ( this.showNotify(notify('error', args);5_ ! # "
hHU d $ this.logEvent(notify('log', args);5_ " $ # hHU d this.showNotify('warn', args);5_ # % $ hHV S d this.showNotify('info', args);5_ $ & % $ hHV' T
d $ window.stars = this.positionMap;5_ % ' & ' hHW e ( this.showLogEvent(notify('log', args);5_ & ( ' ( hHW e ) this.showLogEvent(notify('log', args));5_ ' ) ( hHW e ( this.showLogEvent(notify('log', args);5_ ( * ) hHW U e * this.showLogEvent(notify('error', args);5_ ) + * % hHX0 V e 2 const positionMap = app.starField.positionMap;5_ * , + hHX< e this.starSignal = (() => {5_ + - , hHXD X e this.starSignal = () => {5_ , . - hHX e }5_ - / . hHY h 5_ . 0 / hHY Y h showLogEvent() {5_ / 1 0 hHY" h showLogEvent(..args) {5_ 0 2 1 hHY$ Z h this.showNotify(..args)5_ 1 3 2 hHYY h 5_ 2 4 3 hHY] h " this.showLogEvent('info', args);5_ 3 5 4 hHYc h " this.showLogEvent('warn', args);5_ 4 6 5 hHYf h # this.showLogEvent('error', args);5_ 5 7 6 hHYi \ h ! this.showLogEvent('log', args);5_ 6 8 7 hHY h 5_ 7 9 8 hHY l l 5_ 8 : 9 hHY ] unction mapLogLevel(level) {5_ 9 ; : hHY 1 const { category, color } = mapLogLevel(level);5_ : < ; hHY ^ 0 notify(level, [`[${category}]`, ...args]);5_ ; = < hHY , originalConsole.info.apply(console, args);5_ < > = hHY 5_ = ? > hHY createConsoleStar('info', args);5_ > @ ? hHZ me. me.showLogEvent('warn', args);5_ ? A @ ! hHZ
me.
! me.showLogEvent('error', args);5_ @ B A hHZ _ me.
me.showLogEvent('log', args);5_ A C B hHZ ` )function createConsoleStar(level, args) {5_ B D C hHZ createConsoleStar(level, args) { 5_ C E D hH[ * function createConsoleStar(level, args) {5_ D F E hH[ +v function createConsoleStar(level, args) {5_ E G F v hH[ * function createConsoleStar(level, args) { 6 const { category, color } = this.mapLogLevel(level); c const message = args.map(a => (typeof a === 'object' ? JSON.stringify(a) : String(a))).join(' '); addSpecialStar({ " title: category.toUpperCase(), content: message,
category,
color, onClick: () => { 4 showNotify(level, [`[${category}]`, ...args]); }, }); } 5_ F H G ' v hH[
& 7 | ' ( | 5_ G I H '
v hH[ & ( * function createConsoleStar(level, args) {5_ H J I 1 v hH[ 0 2 4 showNotify(level, [`[${category}]`, ...args]);5_ I K J + v hH[# * , addSpecialStar({5_ J L K v hH[1 function mapLogLevel(level) { switch (level) { case 'info': 4 return { category: 'Info', color: 'skyblue' }; case 'warn': 6 return { category: 'Warning', color: 'orange' }; case 'error': 5 return { category: 'Error', color: 'crimson' }; case 'log': default: 0 return { category: 'Log', color: 'gold' }; } }5_ K M L v hH[6 ~ ~ 5_ L P M v hH[9 a function mapLogLevel(level) {5_ M ` N P 1 6 4 * v 8 hH\ h 0 2 9 this.showNotify(level, [`[${category}]`, ...args]);5_ P a ^ ` 4 * v 8 hIn i 5_ ` b a < 2 v 8 hI} 5_ a c b < 2 v 8 hI 5_ b d c < 2 v 8 hI j
}5_ c e d < 2 v 8 hI
}*/5_ d e < 2 v 8 hI k /*5_ P _ Q ` ^ < 2 v 8 hIY *import {WebTerminal} from "/dumb-term.js"; function showTerm(options){ ( const term = new WebTerminal(options); term.show(); } 5_ ^ _ < 2 v 8 hI] +import {WebTerminal} from u"/dumb-term.js";5_ P R ^ Q v hH\N c //this.showNotify(...args)5_ Q S R hI *import {WebTerminal} from "./terminal.js";5_ R T S hI )import {WebTerminal} from "/terminal.js";5_ S U T hI
d .import {WebTerminal} from "/dumb-terminal.js";5_ T V U hI 5_ U W V hI function showTerm(options){ }5_ V X W hI* e ( const term = new WebTerminal(options); term.open(); term.show();5_ W Y X v hIU 5_ X Z Y v hIo .import {WebTerminal} from "/dumb-terminal.js"; function showTerm(options){ ( const term = new WebTerminal(options); term.show(); }5_ Y [ Z v hIt function showTerm(options){5_ Z \ [ v hIv f
class StarField {5_ [ ] \ ) v hI g *import {WebTerminal} from "/dumb-term.js";5_ \ ] v hI6 5_ M O P N * 4 4 v 8 hH\ ) 5 * + ) *
this.addSpecialStar({ title: category.toUpperCase(), content: message, category, color, onClick: () => { 3 const argsString = args.map(String).join(', '); : this.showNotify(level, [`[${category}]`, argsString]); }, });5_ N O * 5 5 v 8 hH\
) + this.addSpecialStar({5_ hHT= const starSignal = (() => { 2 const positionMap = app.starField.positionMap; const areaMap = { Center: 'Center', Corner: 'Corner', Edge: 'Edge', North: 'North', South: 'South', East: 'East', West: 'West', & All: Object.keys(positionMap), }; ? const applyEffect = (stars, effectFn, duration = 2000) => { ! const active = new Set(); $ stars.forEach((star, i) => { 2 const { cleanup } = effectFn(star, i); active.add(cleanup); }); setTimeout(() => { - active.forEach(fn => fn && fn()); }, duration); }; const effects = { 4 pulseColor: (color, size = 5) => (star) => { const orig = { 2 color: star.style.backgroundColor, ( width: star.style.width, * height: star.style.height, , shadow: star.style.boxShadow }; / star.style.backgroundColor = color; + star.style.width = `${size}px`; , star.style.height = `${size}px`; @ star.style.boxShadow = `0 0 ${size * 2}px ${color}`; return { cleanup: () => { < star.style.backgroundColor = orig.color; 2 star.style.width = orig.width; 4 star.style.height = orig.height; 7 star.style.boxShadow = orig.shadow; } };
}, ' flicker: (color) => (star) => { let visible = true; const orig = { 2 color: star.style.backgroundColor, , shadow: star.style.boxShadow }; - const flick = setInterval(() => { B star.style.backgroundColor = visible ? color : ''; I star.style.boxShadow = visible ? `0 0 4px ${color}` : ''; # visible = !visible; }, 200); return { cleanup: () => { ) clearInterval(flick); < star.style.backgroundColor = orig.color; 7 star.style.boxShadow = orig.shadow; } };
}, + shimmer: (colors) => (star, i) => { 4 const orig = star.style.backgroundColor; let idx = 0; 0 const interval = setInterval(() => { I star.style.backgroundColor = colors[idx % colors.length]; idx++; # }, 100 + (i % 5) * 10); return { cleanup: () => { , clearInterval(interval); 6 star.style.backgroundColor = orig; } }; } }; % const trigger = (signalName) => { switch (signalName) { $ // --- Notifications --- case 'notif.newDM': V applyEffect(positionMap[areaMap.Corner], effects.pulseColor('white')); break; " case 'notif.groupMsg': V applyEffect(positionMap[areaMap.Edge], effects.flicker('blue'), 1000); break; ! case 'notif.mention': X applyEffect(positionMap[areaMap.Center], effects.pulseColor('magenta')); break; case 'notif.react': Z applyEffect(positionMap[areaMap.South], effects.pulseColor('gold'), 1200); break; case 'notif.typing': Y applyEffect(positionMap[areaMap.West], effects.pulseColor('teal'), 1500); break; ! case 'notif.msgSent': ^ applyEffect(positionMap[areaMap.East], effects.pulseColor('lightgreen'), 800); break; ! case 'notif.msgRead': _ applyEffect(positionMap[areaMap.North], effects.pulseColor('lightblue'), 1000); break; " // --- User Status --- ! case 'status.online': \ applyEffect(positionMap[areaMap.Center], effects.pulseColor('green'), 3000); break; " case 'status.offline': [ applyEffect(positionMap[areaMap.Center], effects.pulseColor('gray'), 3000); break; case 'status.idle': ] applyEffect(positionMap[areaMap.Center], effects.pulseColor('orange'), 3000); break; ! case 'status.typing': ] applyEffect(positionMap[areaMap.Center], effects.flicker('lightblue'), 2000); break; case 'status.join': Y applyEffect(positionMap[areaMap.Edge], effects.pulseColor('cyan'), 1500); break; case 'status.leave': Z applyEffect(positionMap[areaMap.Edge], effects.pulseColor('black'), 1500); break; // --- System --- ! case 'sys.broadcast': - areaMap.All.forEach(area => { U applyEffect(positionMap[area], effects.pulseColor('gold'), 1000); }); break; case 'sys.warning': - areaMap.All.forEach(area => { Q applyEffect(positionMap[area], effects.flicker('red'), 2000); }); break; case 'sys.down': - areaMap.All.forEach(area => { U applyEffect(positionMap[area], effects.flicker('darkred'), 3000); }); break; case 'sys.update': k applyEffect(positionMap[areaMap.North], effects.shimmer(['cyan', 'violet', 'lime']), 2500); break; case 'sys.ping': - areaMap.All.forEach(area => { U applyEffect(positionMap[area], effects.pulseColor('white'), 500); }); break; + // --- Activity & Reactions --- " case 'activity.surge': m applyEffect(positionMap[areaMap.Center], effects.shimmer(['white', 'blue', 'purple']), 1500); break; " case 'reaction.burst': ] applyEffect(positionMap[areaMap.South], effects.pulseColor('hotpink'), 1000); break; case 'reaction.lol': X applyEffect(positionMap[areaMap.South], effects.flicker('yellow'), 800); break; " case 'reaction.likes': _ applyEffect(positionMap[areaMap.Center], effects.pulseColor('deeppink'), 1000); break; ' // --- Focus & Movement --- case 'focus.zone': \ applyEffect(positionMap[areaMap.Center], effects.pulseColor('white'), 1500); break; case 'focus.enter': Y applyEffect(positionMap[areaMap.West], effects.pulseColor('cyan'), 1000); break; case 'focus.exit': Y applyEffect(positionMap[areaMap.East], effects.pulseColor('gray'), 1000); break; case 'focus.idle': W applyEffect(positionMap[areaMap.North], effects.flicker('gray'), 2000); break; default: A console.warn('Unknown star signal:', signalName); } }; return { trigger }; })();5_ % hHTB C ) const positionMap = this.positionMap;5_ hHTL C const signal = (() => {5_ hHTX C signal = (() => {5_ hHT` C
signal () {5_ hHTu C }5_ hHTy C }5_ h/ _createStars(starCount) {5_ h/ : F for (let i = 0; i < starCount ? starCount : this.starCount; i++) {5_ h/" 3 } function showStarMessage(text, { duration = 4000, % background = "rgba(0, 0, 0, 0.75)", color = "#fff", fontSize = "1.5rem", zIndex = 9999, = position = "top-center" // or 'center', 'bottom-left', etc. } = {}) { , const msg = document.createElement("div"); $ msg.classList.add("star-message"); msg.textContent = text; Object.assign(msg.style, { position: "fixed", padding: "12px 24px", borderRadius: "8px", background,
color,
fontSize, zIndex, opacity: "0", transform: "scale(0.95)", transition: "all 0.6s ease", pointerEvents: "none", }); // Positioning const positions = { Y "top-center": { top: "10%", left: "50%", transform: "translateX(-50%) scale(0.95)" }, ^ "center": { top: "50%", left: "50%", transform: "translate(-50%, -50%) scale(0.95)" }, 0 "bottom-left":{ bottom: "10%", left: "5%" }, 2 "bottom-right":{ bottom: "10%", right: "5%" }, }; K Object.assign(msg.style, positions[position] || positions["top-center"]); ! document.body.appendChild(msg); // Fade in requestAnimationFrame(() => { msg.style.opacity = "1"; Q msg.style.transform = msg.style.transform.replace("scale(0.95)", "scale(1)"); }); // Remove after duration setTimeout(() => { msg.style.opacity = "0"; P msg.style.transform = msg.style.transform.replace("scale(1)", "scale(0.9)"); ( setTimeout(() => msg.remove(), 600); }, duration); }5_ h/5 ; showStarMessage(text, {5_ h/W 0 "bottom-left":{ bottom: "10%", left: "5%" },5_ h/X 0 "bottom-left":{ bottom: "10%", left: "5%" },5_ h/Y 0 "bottom-left":{ bottom: "10%", left: "5%" },5_ h/^ 0 "bottom-left":{ bottom: "10%", left: "5%" },5_ h/a - "top-left":{ bottom: "10%", left: "5%" },5_ h/d - "top-left":{ bottom: "10%", left: "5%" },5_ h/g - "top-right"{ bottom: "10%", left: "5%" },5_ $ h/} . "top-right"{ bottom: "10%", right: "5%" },5_ h/ԁ + "top-right"{ top: "10%", right: "5%" },5_ h/Ԅ * "top-left":{ top: "10%", left: "5%" },5_ h/- notify(text, {5_ h/8 @ - "top-right": { top: "10%", right: "5%" },5_ h/Թ < notify(text, {5_ h/
G } %function createStarMessage(message, { ! font = "bold 100px sans-serif", resolution = 4, maxStars = 300, color = "gold", duration = 5000, fadeOut = true } = {}) { 2 const canvas = document.createElement("canvas"); & const ctx = canvas.getContext("2d"); canvas.width = 1000; canvas.height = 300; ctx.fillStyle = "black"; ctx.font = font; ctx.textAlign = "center"; ctx.textBaseline = "middle"; = ctx.fillText(message, canvas.width / 2, canvas.height / 2); M const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height).data; const positions = []; 7 for (let y = 0; y < canvas.height; y += resolution) { 8 for (let x = 0; x < canvas.width; x += resolution) { + const i = (y * canvas.width + x) * 4; # if (imageData[i + 3] > 128) { positions.push([ # (x / canvas.width) * 100, # (y / canvas.height) * 100 ]); } } } // Shuffle and trim , positions.sort(() => Math.random() - 0.5); , const used = positions.slice(0, maxStars); // Create stars . const newStars = used.map(([left, top]) => { / const star = document.createElement("div"); , star.classList.add("star-message-star"); Object.assign(star.style, { position: "absolute", & left: `${Math.random() * 100}%`, % top: `${Math.random() * 100}%`, , width: `${Math.random() * 2 + 1.5}px`, - height: `${Math.random() * 2 + 1.5}px`, backgroundColor: color, borderRadius: "50%", opacity: "0", transition: "all 1s ease" }); $ document.body.appendChild(star); ! requestAnimationFrame(() => { # star.style.left = `${left}%`; ! star.style.top = `${top}%`; star.style.opacity = "1"; }); return star; }); if (fadeOut && duration > 0) { setTimeout(() => { newStars.forEach(star => { ! star.style.opacity = "0"; . setTimeout(() => star.remove(), 1000); }); }, duration); } }5_ h/ = V starMessage(message, {5_ . h/z ? - / V - "top-right": { top: "10%", right: "5%" },5_ h/ _createStars(extra = 0) {5_ h/ /starField.renderWord("WOW", { rainbow: true }); starField.explodeAndReturn(); starField.startColorCycle(); 4setTimeout(() => starField.stopColorCycle(), 10000); starField.shuffleAll(2000);5